Coding JavaScript for Mobile Browsers (part 8) - DOM

1/15/2011 4:10:57 PM

3. DOM

The Document Object Model is an increasingly common part of mobile development.

3.1. Versions

Two main DOM versions are available for mobile browsers:

DOM Level 1 HTML
DOM Level 2 HTML & Core

DOM Level 1 has been deprecated as a standard, but it still works in desktop and some mobile browsers. I remember using it in the ’90s, before it was replaced by DOM Level 2.

DOM Level 1 allows a series of array collections as objects in the document for accessing all the elements in the document. The collections are:

images
applets
links
forms
anchors

It also defines the document.getElementById and document.getElementsByName methods. In DOM Level 1, it is common to access a form’s input values using the syntax document.forms[0].input_name.value, supposing a unique form.

DOM Level 2 added some new methods, and it is the most commonly used version today for mobile browsers. DOM Level 3 added events, validation, and XPath support, but it’s not compatible with most mobile browsers.

3.2. Browsing

Table 14 shows compatibility for DOM browsing methods in the different mobile browsers.

Table 14. DOM support compatibility table
Browser/ platform	DOM HTML collecs.	getElementById	getElementsByTagName	childNodes
Safari	Yes	Yes	Yes	Yes
Android browser	Yes	Yes	Yes	Yes
Symbian/ S60	Yes	Yes	Yes	Yes
Nokia Series 40 before 6^th edition	No	Yes	No	No
Nokia Series 40 after 6^th edition	No	Yes	Yes	Yes
webOS	Yes	Yes	Yes	Yes
BlackBerry	No	Yes	No before 4.6	Yes
NetFront	No	Yes	Yes	Yes
Internet Explorer	Partial	Yes	Yes	Yes
Motorola Internet Browser	No	Yes	No	Yes
Opera Mobile	Yes	Yes	Yes	Yes
Opera Mini	Yes	Yes	Yes	Yes

3.3. Query selectors

Query selectors are a way to use CSS selectors to retrieve an element result list from the DOM. This mechanism is very popular when using the jQuery JavaScript library, and it is included natively as an extension in some WebKit-based browsers and Firefox 3.5 for desktop. At the time of this writing query selectors are covered in a W3C draft known as Selectors API Level 1.

A query is made using document.querySelector(selector) for unique results, or document.querySelectorAll(selector) for many possible return values. For example:

var items = document.querySelectorAll("ul.menu > li");
var option = document.querySelector('#form1 input[type="radio"]:checked');

Many browsers have moved ahead to support query selectors, as shown in Table 15.

Table 15. CSS-style query selector compatibility table
Browser/platform	Query selector support
Safari	Yes
Android browser	Yes
Symbian/S60	No
Nokia Series 40	No
webOS	Yes
BlackBerry	No
NetFront	No
Internet Explorer	No
Motorola Internet Browser	No
Opera Mobile	Yes
Opera Mini	Yes

3.4. Changing properties

DOM for HTML defines an object representing each HTML tag with properties for each HTML attribute. Many browsers support this, as you’ll see in Table 8-16 . For example, we can create an image gallery album by changing the src property of an img tag every 2 seconds. When you change a property that defines a change in a resource, the browser needs to get the new resource at that time. The following code demonstrates:

<body>

<script type="text/javascript">
var timer = setInterval(changeImage, 2000);
var currentImage = 0;

function changeImage() {
    // We have 5 images, from 0 to 4
    currentImage = (currentImage + 1) % 5;
    document.getElementById("album").src = currentImage + ".png";
}
</script>

<img src="1.png" id="album" width="100" height="100" />

</body>

Note:

If the mobile browser supports CSS Sprites, we can make the same album by changing the style.backgroundPosition property to move the window to a different part of the image.

Table 16 shows which browsers support changing properties dynamically.

Table 16. Changing properties dynamically compatibility table
Browser/platform	Support for changing properties
Safari	Yes
Android browser	Yes
Symbian/S60	Yes
Nokia Series 40	No before 6^th edition
webOS	Yes
BlackBerry	No before 4.6
NetFront	Yes
Internet Explorer	Partial
Motorola Internet Browser	Yes
Opera Mobile	Yes
Opera Mini	Yes (on the server)

3.5. Changing content

The most common usage of Dynamic HTML is to change the content of an element using the innerHTML property (or the simpler innerText). For example, you may want to use it to replace content in or add content to an element. Table 17 shows which browsers currently support this property.

Table 17. innerHTML property compatibility table
Browser/platform	Support for innerHTML
Safari	Yes
Android browser	Yes
Symbian/S60	Yes
Nokia Series 40	No before 6^th edition
webOS	Yes
BlackBerry	No before 4.6
NetFront	Yes
Internet Explorer	Yes
Motorola Internet Browser	Yes
Opera Mobile	Yes
Opera Mini	Yes (on the server)

3.6. Preloading images

It is common in Dynamic HTML documents to preload images in memory if we are going to use them later in the same document (e.g., in the previous image gallery). This is typically done using code like the following:

var image = new Image(100,25);
image.src = "image_url";

Then, when we use the same src in another image, the resource should already be present in the cache. Table 18 shows which devices support preloading.

Table 18. Preloading images compatibility table
Browser/platform	Support for preloading images
Safari	Yes
Android browser	Yes
Symbian/S60	Yes
Nokia Series 40	No before 6^th edition
webOS	Yes
BlackBerry	No before 4.6
NetFront	Yes
Internet Explorer	Yes
Motorola Internet Browser	No
Opera Mobile	Yes
Opera Mini	Yes

3.7. Adding and removing elements

The alternative to using innerHTML to insert elements inside another element is to use DOM methods to add objects as children. The next script will remove all of a list item’s children and replace them with a link:

var items = document.getElementsById("li");
for (int i=0; i<items.length; i++) {
   for (int j=0; j<items[i].childNodes; j++) {
       items[i].removeChild(items[i].childNodes[j]);
   }
   var a = document.createElement("a");
   a.href = "go.html";
   a.innerHTML = "Item " + i;
   items[i].appendChild(a);
}

Table 19 shows how this works in mobile browsers.

Table 19. Adding and removing elements in DOM compatibility table
Browser/platform	Support for appendChild and removeChild
Safari	Yes
Android browser	Yes
Symbian/S60	Yes
Nokia Series 40	No before 6^th edition
webOS	Yes
BlackBerry	No before 4.6
NetFront	Yes
Internet Explorer	Yes
Motorola Internet Browser	No
Opera Mobile	Yes
Opera Mini	Yes